<!DOCTYPE html>
<html>


<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <!-- 强制禁用所有缓存 -->
  <meta http-equiv="Cache-Control"
    content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">

  <!-- 动态版本控制（关键改进） -->
  <meta name="version" content="<%= BUILD_TIMESTAMP %>">


  <link rel="icon" href="./src/assets/img/logo.png"
    type="image/svg+xml">
  <title>Mat.design</title>
  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->

  <style>
    html,
    body,
    #app {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #7171C6;
    }

    #loader {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      animation: spin 2s linear infinite;
    }

    #loader::before,
    #loader::after {
      content: '';
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
    }

    #loader::before {
      animation: spin 3s linear infinite;
    }

    #loader::after {
      animation: spin 1.5s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .loaded #loader {
      opacity: 0;
      transition: opacity 0.3s ease-out;
    }

    .loaded #loader-wrapper {
      visibility: hidden;
      transform: translateY(-100%);
      transition: visibility 0s, transform 0.3s 1s ease-out;
    }

    .load_title {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      font-family: 'Open Sans', sans-serif;
      color: #FFF;
      font-size: 19px;
      text-align: center;
      line-height: 30px;
    }

    .load_title span {
      font-weight: normal;
      font-style: italic;
      font-size: 13px;
      opacity: 0.5;
    }

    @media (max-width: 768px) {
      #loader {
        width: 50px;
        height: 50px;
      }
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="loader-wrapper">
      <div id="loader"></div>
      <div class="load_title">正在加载系统资源，请耐心等待</div>
    </div>
  </div>

  <!-- 动态注入带版本号的JS（关键改进） -->
  <script type="module"
    src="./src/main.ts?v=<%= BUILD_TIMESTAMP %>"></script>

  <!-- 兼容旧版浏览器控制台提示 -->
  <script>
    if (!window.Promise || !window.fetch || !window.Symbol) {
      document.body.innerHTML = '<div style="text-align:center;padding:50px;font-family:Arial;">您的浏览器版本过低，请升级到现代浏览器</div>'
    }
  </script>
</body>

</html>